<template>
	<view>
		<view class="header bg-main">
			<u-icon name="checkmark-circle-fill" color="#ffffff" size="140"></u-icon>
			<text class="u-font-36 u-m-t-10">回收成功</text>
		</view>
		<view class="list-box">
			<view class="list-bar"></view>
			<view class="list-content">
				<view class="linear-bg"></view>
				<view class="u-p-t-40 u-p-b-30">
					<view class="u-text-center">
						<text>支付金额</text>
					</view>
					<view class="money">
						<text class="u-font-24">￥</text><text class="u-font-60">{{orderForm.amount}}</text>
					</view>
				</view>
				<view class="line"></view>
				<view class="msg-box u-p-30">
					<view class="item">
						<text class="label">订单编号：</text>
						<view class="text">{{orderForm.number}}</view>
					</view>
					<view class="item">
						<text class="label">完成时间：</text>
						<view class="text">{{orderForm.completiontime}}</view>
					</view>
					<view class="item" v-if="orderForm.weight > 0">
						<text class="label">回收总重：</text>
						<view class="text">{{orderForm.weight}}<text class="u-font-24">KG</text></view>
					</view>
					<view class="item" v-if="orderForm.quantity > 0">
						<text class="label">回收件数：</text>
						<view class="text">{{orderForm.quantity}}<text class="u-font-24">件</text></view>
					</view>
					<view class="item">
						<text class="label">实付：</text>
						<view class="text">￥{{orderForm.amount}}</view>
					</view>
					<view class="item">
						<text class="label">支付方式：</text>
						<view class="text">{{orderForm.payway}}</view>
					</view>
				</view>
			</view>
			<view class="u-m-t-60" style="width: 640rpx;">
				<u-button @click="back">返回首页</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				orderForm:{}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.orderView(this.id)
		},
		methods: {
			// 订单详情
			orderView(id){
				return this.$u.get('/User/Order/Detail?id='+id).then((res)=>{
					this.orderForm = res
				})
			},
			back(){
				uni.redirectTo({
					url: '/pages/brother/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
		padding: 60rpx 30rpx 60rpx 30rpx;
		/* #ifdef MP-WEIXIN */
		// padding-top: calc(44px + 80rpx + var(--status-bar-height));
		/* #endif */
		
	}
	.list-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -60rpx;
		.list-bar{
			width: 680rpx;
			height: 20rpx;
			background-color: #178174;
			border-radius: 40rpx;
			margin-top: 20rpx;
		}
		.list-content{
			position: relative;
			margin-top: -10rpx;
			background-color: #fff;
			width: 640rpx;
			// height: 400rpx;
			box-shadow: 0 0 6px #dbdbdb;
			.linear-bg{
				background-image: linear-gradient(to bottom,#30d9c5a1,#ffffff);
				height: 20rpx;
				position: absolute;
				width: 640rpx;
			}
			.money{
				font-size: 50rpx;
				font-weight: bold;
				text-align: center;
				line-height: 160rpx;
				color: $u-color-orange;
			}
			.line{
				position: relative;
				width: 640rpx;
				border-bottom: 1px dashed $u-border-color;
				&:after{
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background-color: #f7f7f7;
					display: block;
					position: absolute;
					top: -10rpx;
					left: -10rpx;
				}
				&:before{
					content: '';
					width: 20rpx;
					height: 20rpx;
					border-radius: 20rpx;
					background-color: #f7f7f7;
					display: block;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.msg-box{
		.item{
			line-height: 2em;
		}
	}
</style>
